import React,{ useState } from 'react';
import { Table, Popconfirm} from 'antd';
import Edit from './Edit'


// 删除弹框
const Del = () => {
  return(
    <Popconfirm onConfirm={confirm} onCancel={cancel} title="确定删除吗？" okText="是的" cancelText="取消">
      <a href="#">删除</a>
    </Popconfirm>
  )
}

function confirm(e) {
    console.log(666,e);
  }
  
  function cancel(e) {
    console.log(999,e);
  }


// 表头
const columns = [
    {
      title: '机构ID',
      dataIndex: 'org_id',
      key: 'org_id',
      render: (text) => <a>{text}</a>,
      align: 'center'
    },
    {
      title: '机构名称',
      dataIndex: 'org_name',
      key: 'org_name',
      align: 'center'
    },
    {
      title: '所在城市',
      dataIndex: 'city',
      key: 'city',
      align: 'center'
    },
    {
      title: '机构类型',
      dataIndex: 'org_type',
      key: 'org_type',
      align: 'center'
    },
    {
      title: '电话',
      dataIndex: 'org_tel',
      key: 'org_tel',
      align: 'center'
    },
    {
      title: '是否启用',
      dataIndex: 'state',
      key: 'state',
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'operation',
    },
  ];


// 表格数据
const dataSource = [
    {
      key: '1',
      id:'1',
      name: '圣母医院',
      city: '厦门市',
      type: '体检机构',
      tel: '020-66666666',
      state: '是',
      operation:(<div><Del/> <Edit/></div>)
      
    },
    {
      key: '2',
      id:'2',
      name: '南一医院',
      city: '深圳市',
      type: '专门体检机构',
      tel: '020-88888888',
      state: '否',
      operation:(<div><Del/> <Edit/></div>)
    },
  ];
  

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    }
  };


  function TableBox(props) {
    const [selectionType] = useState('checkbox');
    
    const { tableData } = props


    return (
        <div>
          <Table
              rowSelection={{
              type: selectionType,
              ...rowSelection,
              }} 
              rowKey='org_id'
              columns={columns}
              dataSource={tableData}
          />
        </div>
    );
  }

export default TableBox;